<template>
<!--  <img alt="Vue logo" src="./assets/logo.png">-->
<!--  <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/vue3-sub-app">vue3-sub-app</router-link>
      <router-link to="/nextjs-app">nextjs-app</router-link>
      <button @click="goIframe('47dc9d75-a614-49d6-ac35-14be7e3845e1')">111</button>
      <button @click="goIframe('91a1bc43-aaef-4d74-b577-8adb70064778')">222</button>
      <button @click="goIframe('d133f89e-cced-44cf-bdf2-1569ac8f07d6')">333</button>

    </nav>
    <router-view></router-view>


    <iframe
        class="frame-v4-item"
        :src="`http://192.168.60.93:3349/app/${iframeSrc}/workflow`"
        ref="frameV4Item"
        frameborder="0"
        :style="{
                '--frame-height': 700 + 'px',
                '--frame-width': 100 + '%'
              }"
        height="700px"
        width="100%"
        scrolling="auto"
        marginwidth="0px"
        marginheight="0px"
    ></iframe>
    <div id="vue3-sub-app"></div>
    <div id="nextjs-app"></div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return {
      iframeSrc:'47dc9d75-a614-49d6-ac35-14be7e3845e1'
    }
  },
  components: {
    // HelloWorld
  },
  methods:{
    goIframe(src){
      this.iframeSrc = src
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#subapp-container {
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 20px;
}
</style>
